<template>
	<view class="recording-container">
		<u-popup mode="bottom" v-model="recordingShow" height="300" :mask-close-able="false"
			:mask-custom-style="{ background: 'rgba(0, 0, 0, 0)' }">
			<view class="recording-container1">
				<view class="recording-box">
					<view @click="handleCloseRecording" class="recording-close">关闭</view>
					<view class="recording-bar">
						<view class="recording-inner-bar" :style="{width: recordingInnerBarWidth}"></view>
					</view>
					<view class="recording-btn-list">
						<view class="recording-btn" @click="playVoice">
							<view class="recording-btn-image">
								<image src="../static/yp_icon1.png" mode="widthFix" style="width: 30px;" />
							</view>
							<view class="recording-btn-text">录音</view>
						</view>
						<view class="recording-btn" @click="playVoiceOriginal">
							<view class="recording-btn-image">
								<image src="../static/yp_icon2.png" mode="widthFix" style="width: 30px;" />
							</view>
							<view class="recording-btn-text">原声</view>
						</view>
						<view class="recording-btn" @touchstart="handleRecording" @touchend="handleSuspendRecording">
							<view class="recording-btn-image recording-btn-image-long">
								<image src="../static/yp_icon3.png" mode="widthFix" style="width: 40px;" />
							</view>
							<view class="recording-btn-text">按下录音</view>
						</view>
						<view class="recording-btn" @click="playVoice">
							<view class="recording-btn-image">
								<image src="../static/yp_icon4.png" mode="widthFix" style="width: 30px;" />
							</view>
							<view class="recording-btn-text">预览</view>
						</view>
					</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		props: {
			recordingShow: {
				type: Boolean,
				default: false,
			},
			url: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				recordingTime: 0,
				totalRecordingTime: 30,
				timer: null,
				voicePath: '',
			}
		},
		computed: {
			// 录音进度条长度
			recordingInnerBarWidth() {
				return (this.recordingTime / this.totalRecordingTime) * 100 + "%"
			}
		},
		mounted() {
			recorderManager.onStart(res=>{
				console.log(res,'onStart')
			})
			recorderManager.onPause(res=>{
				this.voicePath = res.tempFilePath
				console.log(res,'onPause')
			})
			recorderManager.onStop(res=>{
				this.voicePath = res.tempFilePath
				console.log(res,'onStop')
			})
		},
		methods: {
			handleCloseRecording() {
				innerAudioContext.stop()
				this.$emit("closeRecording");
			},
			// 开始录音
			handleRecording() {
				// #ifdef H5
				uni.showToast({
					title: '暂不支持录音功能呢请前往app使用',
					icon: 'none'
				})
				return false
				// #endif
				// #ifndef H5
				if (this.recordingTime == 0) {
					this.startRecord();
				} else {
					this.resumeRecord();
				}
				// #endif
				this.timer = setInterval(() => {
					if (this.recordingTime < this.totalRecordingTime) {
						this.recordingTime = this.recordingTime + 1;
					} else {
						this.endRecord();
					}
				}, 1000)
			},
			startRecord() {
				console.log('开始录音');
				recorderManager.start();
			},
			pauseRecord() {
				console.log('暂停录音');
				recorderManager.pause();
			},
			resumeRecord() {
				console.log('继续录音');
				recorderManager.resume();
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
			},
			playVoice() {
				console.log(this.voicePath, '播放录音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			//播放原音乐
			playVoiceOriginal(){
				innerAudioContext.src = this.url;
				innerAudioContext.play();
			},
			// 停止录音
			handleSuspendRecording() {
				clearInterval(this.timer)
				// #ifndef H5
				this.pauseRecord();
				// #endif
			},
			audioUpload() {
				let _this = this;
				uni.uploadFile({
					url: _this.$url.url + "upload_file_oss",
					filePath: 'file://' + this.voicePath,
					name: "file",
					header: {
						'Authorized': uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						console.log(res)
						this.$emit('stop', {
							url: url
						})
						uni.hideLoading();
					},
					fail: function(res) {
						uni.hideLoading();
						that.Tips({
							title: '上传失败'
						});
					}
				})
			},
		},
	};
</script>

<style scoped>
	.recording-container1 {
		background-color: #33cc00;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		padding-top: 10px;
	}

	.recording-box {
		background-color: #fff;
		height: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
	}

	.recording-close {
		text-align: end;
	}

	.recording-bar {
		width: 100%;
		height: 20rpx;
		background-color: #e9f8d8;
		margin-top: 10rpx;
		border-radius: 50px;
	}

	.recording-inner-bar {
		height: 100%;
		background-color: #33cc00;
		border-radius: 50px;
	}

	.recording-btn-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.recording-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.recording-btn-image {
		width: 90rpx;
		height: 90rpx;
		border: 4rpx solid #5cd630;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}

	.recording-btn-image-long {
		width: 270rpx;
		border: 4rpx solid #5cd630;
		border-radius: 40rpx;
		padding: 0 20rpx;
	}

	.recording-btn-image image {
		height: 80rpx;
		width: 80rpx;
	}

	.recording-btn-text {
		margin-top: 10rpx;
		font-size: 15px;
		color: #555555;
	}
</style>
